<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <test-div></test-div>
    <test-div></test-div>
    <test-div></test-div>
    <test-div></test-div>



</div>
<script>

    Vue.component('zujian', {    //组件定义在使用之前
        template: `
<div>
  <h2>zujian</h2>
                    <p>{{arg}}</p>
</div>

     `,
        props: ['arg']

    });
    Vue.component('test-div', {
        template: `<div :style="myclass">
<h1>test-div组件</h1>
<zujian :arg='argData'></zujian>
<p>点赞人数{{count}}</p>
<button @click="add">点赞</button>
</div>`,
        data() {
            return {
                count: 0,
                argData: '参数传递',
                myclass: {
                    border: '1px solid pink',
                    fontSize: '18px',
                    float: 'left',
                    margin: '0 20px'
                }
            }
        },
        methods: {
            add() {
                this.count++;
            }
        }
    });
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'vue组件'
        },
        methods: {}

    });  //定义好组件再new Vue对象


    // Vue.component('nihao', {
    //     template: `
    //         <div><h2>我是你好组件  </h2></div>
    //     `
    // });
    // Vue.component('zaijian',{
    //     template:`
    //         <div>
    //             <h2>我是再见组件</h2>
    //             {{haha}}
    //         </div>
    //     `,
    //     props:['haha']
    //     //父组件向子组件里面传递参数   props父子传递
    //     // 爷爷组件-->孙子组件不能够直接传递  只能一级一级传递下去
    // })
    // // 现在  ui-btn组件是父组件  再见组件是子组件
    // //3月11号重点   什么是组件   什么是子组件  什么是父组件
    // Vue.component('ui-btn',{
    //     template:`
    //         <div :style="bColor">
    //             <zaijian :haha="woshihaha"></zaijian>
    //             <h2>我是ui组件-按钮</h2>
    //             <p>这是一个计数器{{count}}</p>
    //             <button @click="add()">点赞</button>
    //         </div>
    //     `,
    //     //这个template是组件的html模板  这里面只能有一个子元素
    //     data(){
    //         //这个data里面return的对象是该组件存放数据的地方  等同于vue实例上的data
    //         //为什么不直接写一个对象呢     请联系尤  因为函数返回的对象就是一个独立的对象
    //         return{
    //             count:0,
    //             woshihaha:'属性传递参数',
    //             bColor:{
    //                 border:'1px solid pink',
    //                 fontSize:'18px',
    //                 float:'left',
    //                 margin:'0 20px'
    //             }
    //         }
    //     },
    //     methods:{
    //         add(){
    //             this.count++
    //         }
    //     }
    // })
    // //组件就是自己去创建标签  在vue里面
    //
    // let app = new Vue({
    //     el:'#app',
    //     data:{
    //         msg:'我们的组件'
    //     }
    // })
</script>

</body>
</html>